<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title></title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
	<!-- <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"> -->
</head>

<body>
1.常规 <br>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
<br>

2.标签(其它)按钮 <br>
	<a class="btn btn-primary" href="#" role="button">Link</a>
	<button class="btn btn-primary" type="submit">Button</button>
	<input class="btn btn-primary" type="button" value="Input">
	<input class="btn btn-primary" type="submit" value="Submit">
<br>

3.Outline buttons <br>    <!-- .btn-*-outline -->
	<button type="button" class="btn btn-primary-outline">Primary</button>
<br>

4.改变按钮大小<br>
	<button type="button" class="btn btn-primary btn-lg">Large button</button>
	<button type="button" class="btn btn-primary btn-sm">Small button</button>
	<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
<br>

5.按钮状态(已选中)<br>
	<a href="#" class="btn btn-primary active" role="button">Primary link</a>
<br>

6.Disabled (禁用)<br>
	<button type="button" class="btn btn-primary" disabled>Primary button</button>
<br>

7.按钮选中取消状态<br>
	<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  		Single toggle
	</button>
<br>

8.Checkbox and radio buttons<br>
	<div class="btn-group" data-toggle="buttons">      <!-- 同一个组 -->
	  	<label class="btn btn-primary active">
	    	<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1   <!--  取消name="opetions"则可以多选 -->
	  	</label>
	  	<label class="btn btn-primary">
	    	<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
	  	</label>
	</div>
<br>

9.方法<br>
	$().button('toggle')
<br/><hr/>

10.Button group  (按钮组)	<br>
	<div class="btn-group" role="group" aria-label="Basic example">
	  	<button type="button" class="btn btn-default">Left</button>
	  	<button type="button" class="btn btn-default">Middle</button>
	  	<button type="button" class="btn btn-default">Right</button>
	</div>
	<!-- 大小设置： class="btn-group btn-group-lg" 、class="btn-group btn-group-sm" -->
<br/>

11.Button toolbar	(包含多个按钮组)<br>
	<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
	  	<div class="btn-group" role="group" aria-label="First group">
		    <button type="button" class="btn btn-default">1</button>
		    <button type="button" class="btn btn-default">2</button>
	  	</div>
	  	<div class="btn-group" role="group" aria-label="Second group">
		    <button type="button" class="btn btn-default">3</button>
  		</div>
  	</div>
<br/>

12.按钮组垂直方向 <br>
	<div class="btn-group-vertical">
		<button type="button" class="btn btn-default">1</button>
		<button type="button" class="btn btn-default">2</button>
	</div>
<br><hr>

13.Dropdowns（下拉列表）<br>
	<div class="dropdown open">											<!-- 默认列表打开 -->
	  	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" >
	    	Dropdown
	  	</button>
	  	<div class="dropdown-menu" >
	  		<h6 class="dropdown-header">Dropdown header</h6>
	  		<hr>
		    <li><a href="#" id="cz">操作</a></li>
			<li class="disabled">										<!-- 默认不开启 -->
				<a href="#">另一操作</a>							
			</li>
	 	 </div>
	</div>
<br>


    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>

</html>

<!-- 基本按钮（1-9）：http://v4.bootcss.com/components/buttons/ -->
<!-- 按钮组（10-12） http://v4.bootcss.com/components/button-group/ -->
<!-- http://v3.bootcss.com/components/#btn-groups -->